<template>
    <div class="addInfo">
         <mt-header fixed title="任务清单编辑" id="header1"></mt-header>
         <div class="back" @click="backPage">
            <img src="../../public/image/back.png" alt="" />
        </div>
        <div class="addContent">
            <el-form ref="form" :model="resultList" label-width="100px">
                <el-form-item label="任务名称">
                    <el-input v-model="resultList.taskName" placeholder="请输入任务名称"></el-input>
                </el-form-item>
                <el-form-item label="任务类型">
                    <el-select v-model="resultList.taskType" class="select">
                        <el-option v-for="(item,index) in taskData.taskType" :key="index" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="海事局" class="select">
                     <el-select v-model="resultList.marineBoard" @change="selectItem">
                        <el-option v-for="(item,index) in taskData.marineBoardCode" :key="index" :label="item.orgName" :value="item.orgName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="雷达站" class="select">
                     <el-select v-model="resultList.radarStation" @change="selectRadarItem" @focus="judgeCondition">
                        <el-option v-for="(item,index) in taskData.radarStationCode" :key="index" :label="item.orgName" :value="item.orgCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-col >
                        <el-date-picker type="date" placeholder="yy-mm-dd" v-model="resultList.startDate" style="width: 85%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-col>
                        <el-date-picker type="date" placeholder="yy-mm-dd" v-model="resultList.endDate" style="width: 85%;"></el-date-picker>
                    </el-col>
                </el-form-item>

                <!-- 实施对象 -->
                <el-form-item label="实施对象">
                    <el-input v-model="resultList.implementDest" @focus="getDevice">
                        <i slot="suffix" class="el-input__icon el-icon-edit"></i>
                    </el-input>
                </el-form-item>

                 <!-- 设备树  选择实施对象 弹窗 -->
                <el-dialog title="任务清单新增" :visible.sync="dialogFormVisible">
                    <el-form>
                        <el-form-item label="选择实施对象" :label-width="formLabelWidth">
                             <el-menu class="el-menu-vertical-demo" v-for="(item,index) in deviceData" :key="index" id="menu">
                                <el-submenu :index="item.nodeCode">
                                    <!-- 第一层 -->
                                    <template slot="title">
                                        <img :src="item.icon" alt="">
                                        <span>{{item.nodeName}}</span>
                                    </template>
                                    <el-submenu :index="count.nodeCode" v-for="(count,second) in item.list" :key="second">
                                        <!-- 第二层 -->
                                        <template slot="title">
                                            <img :src="count.icon" alt="">
                                            <span @click="selectWhich(count.nodeCode,count.nodeName)">{{count.nodeName}}</span>
                                        </template>
                                        <el-submenu :index="num.nodeCode" v-for="(num,third) in count.list" :key="third">
                                            <!-- 第三层 -->
                                            <template slot="title">
                                                <img :src="num.icon" alt="">
                                                <span @click="selectWhich(num.nodeCode,num.nodeName)">{{num.nodeName}}</span>
                                            </template>
                                            <el-submenu :index="k.nodeCode" v-for="(k,fourth) in num.list" :key="fourth">
                                                 <!-- 第四层 -->
                                                 <template slot="title">
                                                    <img :src="k.icon" alt="">
                                                    <span @click="selectWhich(k.nodeCode,k.nodeName)">{{k.nodeName}}</span>
                                                </template>
                                            </el-submenu>
                                        </el-submenu>
                                    </el-submenu>
                                </el-submenu>
                            </el-menu>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" plain @click="saveMenuData">保存</el-button>
                        <el-button type="primary" plain @click="dialogFormVisible = false">关闭</el-button>
                    </div>
                </el-dialog>

                <!-- 海事局审核人-->
                <el-form-item label="审核人">
                    <el-input v-model="resultList.presenter" @focus="findHsjUser">
                        <i slot="suffix" class="el-input__icon el-icon-edit"></i>
                    </el-input>
                </el-form-item>

                <!-- 海事局审核人 弹窗 -->
                 <el-dialog title="任务清单新增" :visible.sync="dialogFormVisible1">
                    <el-form>
                        <el-form-item label="选择实施对象" :label-width="formLabelWidth">
                            <el-table :data="examineData"  border style="width: 100%" id="table" @select="selectData">
                                <el-table-column type="selection"></el-table-column>
                                <el-table-column type="index"></el-table-column>
                                <el-table-column  prop="userName" label="用户名称"></el-table-column>
                                <el-table-column  prop="phone"  label="电话" width="120"></el-table-column>
                                <el-table-column  prop="roleId"  label="角色"></el-table-column>
                            </el-table>
                        </el-form-item>
                    </el-form>
                    <div>提示:向右滑动查看详细信息</div>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" plain  @click="prevPage()" class="prev" :disabled="isDisabled"><i class="iconfont el-icon-arrow-left"></i>上一页</el-button>
                        <el-button type="primary" plain  @click="nextPage()" class="next" :disabled1="isDisabled"><i class="iconfont el-icon-arrow-right"></i>下一页</el-button>
                        <el-button type="primary" plain @click="saveExamineData">保存</el-button>
                        <el-button type="primary" plain @click="dialogFormVisible1= false">关闭</el-button>
                    </div>
                </el-dialog>
                <el-form-item label="任务内容">
                    <el-input type="textarea" v-model="resultList.taskContent" style="width:95%;" :rows="4"></el-input>
                </el-form-item>
                <el-form-item id="el_form">
                    <el-button type="primary" plain @click="saveEdition">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import api from '../utils/api';
export default {
    data(){
        return{
            pages:1,//分页
            isDisabled:true,//分页按钮是否禁用
            isDisabled1:false,//
            dialogFormVisible:false,//任务清单 实施对象弹窗
            dialogFormVisible1:false,//任务清单 审核状态弹窗
            formLabelWidth:'60px',//
            //新增信息
            taskData:{
                taskName:'',//任务名称
                taskType:[],//任务类型 
                marineBoardCode:[],//海事局
                radarStationCode:[],//雷达站
                startDate:'',//计划开始时间
                endDate:'',//计划结束时间
                taskObj:"",//实施对象
                personName:"",//海事局审核人
                content:'',//任务内容
            },
            query3:'',//v-model 雷达站
            selectHsj:"",//选择海事局
            seletRadarCode:'',//选择雷达站
            selectCode:'',//设备树
            deviceData:[],//选择实施对象
            examineData:[],//审核人
            selectName:"",//保存选择设备树节点内容
            roleId:[],//角色id  string
            loginName:[],//登陆名 string 
            userName:[],//用户名 string
            loginNames:"",
            userNames:"",
            roleIds:'',
            radarName:"",//雷达name值
            resultList:{
                taskName:"",
                taskType:"",
                marineBoard:"",
                radarStation:"",
                implementDest:"",
                taskContent:"",
                presenter:"",
                startDate:"",
                endDate:"",
                id:""
            }
        }
    },
    mounted(){
        this.findTaskType();//任务类型
        this.addPlandata();//选择海事局
        this.selectRadar();//选择雷达站
        this.getData();//渲染数据
    },
    methods:{
        //返回上一页
        backPage(){
            this.$parent.$router.go(-1);
        },
        //workProgress.vue ===> formList.vue 渲染数据
        getData(){
            this.resultList.taskName = this.$store.state.taskName;
            this.resultList.taskType = this.$store.state.taskType;
            this.resultList.marineBoard = this.$store.state.marineBoard;
            this.resultList.radarStation = this.$store.state.radarStation;
            this.resultList.implementDest = this.$store.state.implementDest;
            this.resultList.taskContent = this.$store.state.taskContent;
            this.resultList.presenter = this.$store.state.presenter;
            this.resultList.startDate = this.$store.state.startDate;
            this.resultList.endDate = this.$store.state.endDate;
            this.resultList.id = this.$store.state.id;
        },
        //任务类型
        findTaskType:async function(){
            let data = {
                params:"cateCode=TASK_TYPE"
            }
            const res = await this.$axios._post(api.findTaskMsgList,data);
            if(res.data.success){
                this.taskData.taskType = res.data.data;
            }
        },
        //海事局数据
        addPlandata:async function(){
            let data={
                params:"orgTypeCode=HAI_SHI"
            }
            const res = await this.$axios._post(api.findOrg ,data);
            if(res.data.success){ 
                this.taskData.marineBoardCode = res.data.data;
            }
        },
        //选中海事局option
        selectItem(e){
            this.resultList.radarStation='';//先清空雷达站
            if(e == '湛江海事局'){
                e = 'ZHAN_JIANG_HAISHIJU';
            }else if(e == '广州海事局'){
                e = 'GUANG_ZHOU_HAISHIJU';
            }else if(e == '汕头海事局'){
                e = 'SHAN_TOU_HAISHIJU';
            }else if(e == '茂名海事局'){
                e = 'MAO_MING_HAISHIJU';
            }else if(e == '惠州海事局'){
                e = 'HUI_ZHOU_HAISHIJU';
            }else if(e == '珠海海事局'){
                e = 'ZHU_HAI_HAISHIJU';
            }else{
                e = 'DONG_GUAN_HAISHIJU';
            }
            this.selectHsj = e;
            this.selectRadar(e);
        },
        //选择雷达站
        selectRadar:async function(code){
            let data = {
                params:"orgCode="+code
            }
            const res = await this.$axios._post(api.findLeida ,data);
            if(res.data.success){
                this.taskData.radarStationCode = res.data.data;
            }
        },
        selectRadarItem(e){
            //选择雷达站 code===>传入选择实施对象
            this.seletRadarCode = e;
        },
        //判断是否已选择海事局，若不，弹出提示
        judgeCondition(e){
            if(!this.selectHsj){
                this.$message({
                    message:"请先选择海事局",
                    type:"warning"
                })
            }
        },

        //实施对象
        getDevice:async function(){
            this.deviceData = [];
            if(this.seletRadarCode){
                this.dialogFormVisible = true;
                let data = {
                    params:"ldzCode="+this.seletRadarCode//雷达站编码
                }
                const res = await this.$axios._post(api.getDevice,data);
                if(res.data.success){
                    this.forData(res.data.data);
                }
            }else{
                this.$message({
                    message:"请先选择雷达站",
                    type:"warning"
                })
            }
           
        },
        //循环设备树数据
        forData(res){
            let obj = res[0];
            obj.list = [];
            this.deviceData.push(obj);
            res.splice(0,1);
            orderData(this.deviceData);
            function orderData(newRes){
                for(let i=0;i<newRes.length;i++){
                    for(let j=0;j<res.length;j++){
                        if(newRes[i].nodeCode == res[j].parentCode){
                            var obj1 = res[j];
                            obj1.list = [];
                            newRes[i].list.push(obj1);
                            res.splice(j,1);
                            j--;
                        }
                    }
                    orderData(newRes[i].list);
                }
            }
        },
        //选中实施对象
        selectWhich(code,name){
            this.selectCode = code;
            this.selectName = name;
        },
        //保存选择设备树节点内容
        saveMenuData(){
            this.dialogFormVisible = false;
            //界面内容
            this.resultList.implementDest = this.selectName;
        },
        //审核人
        findHsjUser:async function(){
            this.dialogFormVisible1 = true;
            let data = {
                params:"page="+this.pages+"&rows="+7
            }
            const res = await this.$axios._post(api.findHsjUser,data);
            if(res.data.success){
                this.examineData = res.data.data;
            }
        },
        prevPage(){
            this.pages--;
            if(this.pages<=1){
                this.isDisabled=true;
            }
            this.findHsjUser(this.pages);
        },
        nextPage(){
            this.pages++;
            if(this.pages>1){
                this.isDisabled=false;
            }
            this.findHsjUser(this.pages);
        },
        //checkbox勾选
        selectData(selection, row){
           this.loginName.push(row.loginName);
           this.userName.push(row.userName);
           this.roleId.push(row.roleId);
           this.loginNames = this.loginName.join(",");
           this.userNames = this.userName.join(",");
           this.roleIds = this.roleId.join(",");
        },
        //审核人选择后，点击保存
        saveExamineData(){
            this.dialogFormVisible1 = false;
            this.resultList.presenter = this.userNames;
            this.loginName = [];
            this.userName = [];
            this.roleId = [];
        },
        //保存编辑
        saveEdition:async function(){
            window.console.log(this.selectHsj);
            window.console.log(this.resultList.radarStation);
            window.console.log(this.resultList.taskContent);
            window.console.log(this.resultList.implementDest);
            window.console.log(this.resultList.presenter);
        
            var startDate=JSON.stringify(this.resultList.startDate).substring(1,10);
            var endDate=JSON.stringify(this.resultList.endDate).substring(1,10);
            window.console.log(JSON.stringify(this.resultList.startDate).substring(1,11));
            window.console.log(JSON.stringify(this.resultList.endDate).substring(1,11));
            let data = {
                //任务id
                params:"id="+this.resultList.id+"&taskName="+this.resultList.taskName+"&taskType="+this.resultList.taskType+"&marineBoardCode="+this.selectHsj
                +"&radarStationCode="+this.resultList.radarStation+"&taskContent="+this.resultList.taskContent+"&implementDest="+this.resultList.implementDest+"&executorId="
                + this.resultList.presenter+"&startDate="+startDate+"&endDate="+endDate
            }
            const res = await this.$axios._post(api.updateRwqd,data);
            if(res.data.success){
                window.console.log(res);
            }
        }
    }
}
</script>
<style scoped lang="scss">
   
    .el-input{
        width:85%;
    }
    #table{
        margin-left:-40px;
    }
    #menu{
        margin-left:-60px;
    }
    .addInfo{
        width:100vw;
        position:relative;
        overflow: hidden;
        background-color:#fff;
        .back{
            position:absolute;
            left:0;
            top:0;
            width:10vw;
            height:2.5rem;
            z-index:6;
            img{
                margin-top:9px;
                display:block;
            }
        }
        .addContent{
            width:100vw;
            margin-top:5rem;
            overflow: hidden;
        }
    }
</style>
